<template>
	<div class="app-container" v-loading="data.mtloading">
		<el-form :model="data.info" :rules="data.rules" class="w-full" :label-width="language=='en'?'160':'120'" ref="ruleFormRef">

			<el-form-item :label="$t('account.organization.higherLevel') + ':'" prop="pid" class="w-1/2">
				<el-cascader v-model="data.info.pid" :props="organinfo" class="w-full" filterable clearable
					:placeholder="$t('message.pleaseSelect')" />
			</el-form-item>

			<el-form-item :label="$t('account.organization.name') + ':'" prop="organization_name" class="w-1/2">
				<el-input v-model="data.info.organization_name" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('machine.types.sort') + ':'" prop="sort" class="w-1/2">
				<el-input v-model="data.info.sort" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<div class="w-2/4 text-center">
				<div class="inline-block">
					<el-button type="primary" @click="submit(ruleFormRef)">{{ $t('public.save') }}</el-button>
					<el-button @click="cancell">{{ $t('public.cancel') }}</el-button>
				</div>
			</div>

		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import hierarchy from '@/utils/hierarchy';
import { addorganization } from '@/api/account';
import { useRouter } from "vue-router";
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
let ruleFormRef = ref<any>();
let router = useRouter()

let data = reactive({
	mtloading: false, // 加载
	info: { // 主体信息
		pid: [],
		organization_name: '',
		is_top: 2,
		sort: '',
	},
	rules: { // 表单验证
		pid: { required: true, message:  $t('message.pleaseSelect'), trigger: 'change' },
		organization_name: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' },
		sort: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' },
	},
})

// 管理组织
let organinfo = reactive({
	lazy: true,
	multiple: false,
	emitPath: true,
	checkStrictly: true,
	async lazyLoad(node, resolve) {
		let nodes = await hierarchy.arrange(2, node.data.value);
		resolve(nodes);
	}
});

let submit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		if (valid) {
			let obj = {
				pid: 0,
				organization_name: data.info.organization_name,
				is_top: data.info.is_top,
				sort: data.info.sort,
			}
			if (data.info.pid.length != 0) {
				obj.pid = data.info.pid[data.info.pid.length - 1]
			}
			data.mtloading = true
			addorganization(obj).then(res => {
				data.mtloading = false
				if (res.state == 200) {
					ElMessage({
						message: $t('message.addSuccess'),
						type: 'success'
					})
					router.back()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})

		}
	})
}

//取消
let cancell = () => {
	data.info = {
		pid: '',
		organization_name: '',
		is_top: 2,
		sort: '',
	}
	router.back()
}

</script>